<template>
  <div class="register-form">
    <div class="register-form-inner">
      <div class="register-form-header">华为账号登录</div>
      <div class="register-form-header-hascount">
        <span>已有账号，</span>
        <a class="register-form-header-hascount-link" @click="goLogin">去登录</a>
      </div>
      <div class="register-form-item">
        <input type="text" v-model="username" placeholder="用户名" @blur="blurUserName" />
      </div>
      <div class="errorDiv" v-show="usernameTips">
        <i class="ic-tips"></i>
        <span class="ic-tips-text">{{usernameTips}}</span>
      </div>

      <div class="register-form-item">
        <input type="text" v-model="mobile" placeholder="手机号" @blur="blurMobile" />
      </div>
      <div class="errorDiv" v-show="mobileTips">
        <i class="ic-tips"></i>
        <span class="ic-tips-text">{{mobileTips}}</span>
      </div>

      <div class="register-form-item">
        <input type="text" placeholder="密码" v-model="password" />
      </div>

      <div class="register-form-item">
        <input type="text" placeholder="确认密码" v-model="repassword" />
      </div>

      <div class="register-form-item">
        <input type="text" placeholder="邮箱" v-model="email" @blur="blurEmail" />
      </div>
      <div class="errorDiv" v-show="emailTips">
        <i class="ic-tips"></i>
        <span class="ic-tips-text">{{emailTips}}</span>
      </div>

      <div class="register-form-item relative">
        <input type="text" placeholder="邮箱验证码" v-model="vcode" />
        <span class="vscode" :class="isgrey ? 'grep' : ''" @click="queryEmailCode">获取验证码</span>
      </div>

      <div class="sub-btn" @click="register">注册</div>
    </div>
  </div>
</template>

<script>
import { isPhone, check } from "@/assets/common";

export default {
  data() {
    return {
      username: "",
      usernameTips: "",
      mobile: "",
      mobileTips: "",
      email: "",
      emailTips: "",
      password: '',
      repassword: '',
      isgrey: ''
    };
  },
  methods: {
    blurUserName() {
      if (this.username && this.username.length > 10) {
        this.usernameTips = "用户名超过长度";
      } else {
        this.usernameTips = "";
      }
    },

    blurMobile() {
      if (this.mobile && !isPhone(this.mobile)) {
        this.mobileTips = "手机号码不正确";
      } else {
        this.mobileTips = "";
      }
    },

    blurEmail() {
      if (this.email && !check(this.email)) {
        this.emailTips = "邮箱格式不正确";
      } else {
        this.emailTips = "";
      }
    },

    goLogin() {
      this.$router.push({
        name: 'login'
      });
    },

    async queryEmailCode() {
      if (!this.email) {
        this.$message({
          message: '请输入邮箱号码',
          type: "error"
        });
        return;
      }
      var data = await this.$http.get(
        `/index.php/sendEmailCode?email=${this.email}`
      );
      if (data.code == 1) {
        this.$message({
          message: "验证码已经发出，请关注邮件",
          type: "success"
        });
      }
    },

    async register() {
      var data = await this.$http.post("/index.php/register", {
        username: this.username,
        mobile: this.mobile,
        password: this.password,
        repassword: this.repassword,
        email: this.email,
        vcode: this.vcode
      });
      if (data.code == 1) {
        this.$message({
          message: "注册成功",
          type: "success"
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      } else {
        this.$message({
          message: data.msg,
          type: "error"
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
  .register-form {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 48px;
    .register-form-inner {
      width: 352px;
    }

    .register-form-header {
      font-size: 25.6px;
      color: #191919;
      text-align: center;
    }

    .register-form-header-hascount {
      margin-top: 6.4px;
      font-size: 14.4px;
      color: #191919;
      display: flex;
      justify-content: center;

      .register-form-header-hascount-link {
        display: inline-block;
        color: #007dff;
        font-size: 14.4px;
        cursor: pointer;
      }
    }

    .register-form-item {
      margin-top: 16px;
      width: 100%;
      border-radius: 6.4px;

      input {
        width: 100%;
        height: 38px;
        outline: 0;
        border: 0;
        background: #f2f2f2;
        padding: 0 12px;
      }
    }

    .relative {
      position: relative;
    }

    .vscode {
      margin-right: 12.8px;
      margin-top: 8.8px;
      position: absolute;
      top: 0;
      right: 0;
      color: #007dff;
      font-size: 11.200000000000001px;
      cursor: pointer;
    }

    .sub-btn {
      cursor: pointer;
      width: 220.8px;
      font-size: 14.4px;
      font-weight: 400;
      height: 38.400000000000006px;
      color: #fff;
      border-radius: 6.4px;
      background: #a9cfff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      margin-top: 40px;
    }
  }

  .hwid-input-msg-error {
    margin: 6.4px;
  }

  .hwid-root .hwid-input-msg-error .errorDiv {
    display: flex;
  }

  .hwid-root .hwid-input-msg-error .errorDiv .ic-tips {
    margin-right: 3.2px;
    margin-left: 0;
  }

  .ic-tips {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #fe3421;
    border-radius: 50%;
  }
  .ic-tips-text {
    font-size: 10px;
    color: #fa2a2d;
  }
</style>